<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<MyComponent > - <mycomponent>-->
    <my-component msg="第一个"></my-component>
    <input v-model="name1"/>
    <my-component msg="第二个"></my-component>
    <input v-model="name2"/>
    <!--<div v-bind:class=''>-->
    <my-component :msg="name3"></my-component>
    <input v-model="name3"/>
    <my-component2 title="局部注册" name="张三" age="hello" :salary="salary" type="hello"></my-component2>

    <my-component3></my-component3>
</div>
<script src="../../js/vue.js"></script>
<script>
    console.log(parseInt(Math.ceil(Math.random() * 39)))
    // 局部注册
    const MyComponent2 = {
        // props: ['title', 'name', 'age'],
        props: {
            title: String,
            name: String,
            age: Number,
            height: {
                type: Number,
                required: true
            },
            salary: {
                type: Number,
                default: 100
            },
            type: {
                validator(value) {
                    // prop验证发生在组件实例创建之前，所以在default 以及validator 中不能使用data中的数据
                    return ['danger', 'success', 'warning'].includes(value)
                }
            }
        },
        data() {
            return {
                // arr: ['danger', 'success', 'warning']
            }
        },
        methods: {},
        template: `
          <div>{{ title }}, 我叫{{ name }}, 今年{{ age }}岁, 身高{{ height }},工资{{ salary }}</div>
        `
    }
    // 自定义组件 Vue实例
    const app = Vue.createApp({
        data() {
            return {
                name1: '',
                name2: '',
                name3: '',
                salary: 200
            }
        },
        components: {
            MyComponent2
        }
    })

    // 全局注册 在当前Vue实例任意地方可以使用
    app.component("MyComponent", {
        props: ['msg'],
        data() {
            return {}
        },
        // components: {
        //     MyComponent2
        // },
        methods: {},
        template: `
          <div>{{ msg }}</div>
          <!--<my-component2 title="我使用了局部注册的组件"></my-component2>-->
        `
    })

    app.component("MyComponent3", {
        template: `
            <my-component msg="我使用了全局注册的组件my-component"></my-component>
        `
    })
    app.mount("#app")
</script>
</body>
</html>